<template>
  <section id="Login-Page" @keyup.enter="doLoginFun">
    <div class="login-form-ctn">
      <div class="login-ctn">
        <div class="item-style">
          <span class="label">用户名</span>
          <div class="ipt-ctn">
            <input v-model="loginInfo.username" type="text" class="ipt" placeholder="请输入用户名" >
          </div>
        </div>
        <div class="item-style">
          <span class="label">密码</span>
          <div class="ipt-ctn">
            <input v-model="loginInfo.password" type="password" class="ipt" placeholder="请输入密码" >
          </div>
        </div>
<!--        <div class="item-style">
          <span class="label">验证码</span>
          <div class="ipt-ctn" style="width:30%;">
            <input v-model="loginInfo.validCode" type="text" class="ipt" placeholder="请输入验证码" >
          </div>
          <div class="ipt-ctn" style="width:45%;">
            <img src="" />
          </div>
        </div>-->
<!--        <div class="slide-style">
          <Verify @success="verifyStatus=true" :barSize="barSize" :showButton="false" :type="3"></Verify>
        </div>-->
      </div>
    </div>
  </section>
</template>

<script>
// import Verify from 'vue2-verify'
import { getRsaPublicKeyFun, loginFun } from '../api/apiFun'
export default {
  labelWidth: 100,
  data () {
    return {
      // publicKey: '',
      verifyStatus: false,
      loginInfo: {
        username: 'lyc',
        password: 'lyc666888',
        validCode: ''
      },
      barSize: {
        width: '100%',
        height: '40px'
      }
    }
  },
  // components: { Verify },
  created () {
    // this.publicKeyFunction()
  },
  methods: {
    publicKeyFunction() {
      getRsaPublicKeyFun().then(res => {
        if(parseInt(res.code) === 0) {
          this.publicKey = res.data.publicKey
        } else {
          this.$Message.warning('公钥获取失败！')
        }
      }).catch(err => {
        console.log(err)
        this.$Message.error('api调用异常，请联系管理员！')
      })
    },
    doLoginFun() {
      /* if(this.verifyStatus) {} */
      let params = JSON.parse(JSON.stringify(this.loginInfo))
      let pubkeyHex = "04bd59139f696b2b643da3c1616cdf4c366a5311eecfbce6f1bfe6017550101de67391fd9ae94e7d1ece497e89c37722bcf256c52d9b28ef66cf8673f429601db1"
      params.password = sm2Encrypt(params.password, pubkeyHex, 0)
      loginFun(params).then(res => {
        if(parseInt(res.code) === 0 && res.data) {
          this.$router.push("index")
          this.$Message.success("登录成功!")
          sessionStorage.setItem("userInfo", JSON.stringify(res.data.userInfo))
        } else {
          this.$Message.warning(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

  }
}
</script>

<style lang="less" scoped>
#Login-Page {
  width: 100%;
  height: 100%;
  background: url("../assets/imgs/login_bg.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .login-form-ctn {
    width: 20%;
    height: 50%;
    position: absolute;
    top: 25%;
    right: 5%;
    .login-ctn {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .item-style {
        display: flex;
        width: 100%;
        height: 15%;
        margin-bottom: 5%;
        justify-content: flex-start;
        align-items: flex-end;
        color: #ffffff;
        border-bottom: 1px solid #ffffff;
        .label {
          width: 25%;
          font-size: 18px;
          font-family: cursive;
        }
        .ipt-ctn {
          width: 75%;
          height: 100%;
          display: flex;
          align-items: flex-end;
          .ipt {
            width: 100%;
            height: 60%;
            border: none;
            outline: none;
            background: none;
          }
          img {
            width: 100%;
            height: 100%;
            padding-left: 5%;
          }
          input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #ffffff75;
            font-family: cursive;
            font-size: 16px;
          }
        }
      }
      .slide-style {
        width: 100%;
        height: 15%;
        margin-bottom: 5%;
      }
    }
  }
}
</style>
